<template>
  <div>
    <div class="right-box">
      <div class="max-title-view" style="width:78%">
        <div class="name">农场天气</div>
        <div class="right-title-view">
          <img src="@/assets/dataStation/address-select.png">  {{ address }}
        </div>
      </div>
    </div>
    <div class="right-box">
      <div class="weather-view">
        <div class="weather-item">
          <img style="width:60%;margin-top:10px;" src="@/assets/dataStation/w4.png">
          <div class="weather-box">
            <div class="max-temp">{{ weatherData.tempMin }}</div>
            <div class="min-temp"><div>/{{ weatherData.tempMax }}℃</div><div>{{ weatherData.textDay }}</div></div>
          </div>
        </div>
        <div class="weather-item">
          <img src="@/assets/dataStation/w1.png">
          <div class="weather-text">降水</div>
          <div class="weather-num">{{ weatherData.precip }}<span>mm</span></div>
        </div>
        <div class="weather-item">
          <img src="@/assets/dataStation/w2.png">
          <div class="weather-text">湿度</div>
          <div class="weather-num">{{ weatherData.humidity }}<span>%</span></div>
        </div>
        <div class="weather-item">
          <img src="@/assets/dataStation/w3.png">
          <div class="weather-text">风力</div>
          <div class="weather-num" style="font-size:13px;padding-top:3px;">{{ weatherData.windScale }}级</div>
        </div>
      </div>
    </div>
    <div class="right-box" style="margin-top:10px">
      <div class="title-line-bg">
        <img class="icon-img" src="@/assets/dataStation/w5.png">
        <template v-if="weatherData.warning">
          <!-- <span
            v-for="dt in JSON.parse(weatherData.warning)"
            :key="dt.id"
            style="position: absolute;
              right: 10px;
              top: 6px;
              padding: 4px;
              font-size: 13px;
              color: #333;"
            :style="'background-color: '+dt.severityColor"
          >
            {{ dt.typeName }}
          </span> -->
          <span v-for="dt in JSON.parse(weatherData.warning)" :key="dt.id" :title="dt.title" style="font-size: 13px;">
            {{ dt.title }}
          </span>
        </template>
        <template v-else>暂无预警</template>
      </div>
    </div>
    <div class="right-box">
      <div class="title-line-bg1">
        <img class="icon-img" src="@/assets/dataStation/w6.png">
        {{ summary }}
      </div>
    </div>
    <div class="right-box">
      <div class="weather-grid">
        <div v-for="item in lists" :key="item.fxDate" class="weather-item">
          <div class="day-text">{{ formatDateWithTime(item.fxDate) }}</div>
          <div class="day-temp" style="padding-top:8px;"> <i :class="`qi-${item.iconDay}`" />{{ item.textDay }}</div>
          <div class="day-temp" style="font-weight:600;padding-top:10px;">
            {{ item.tempMin }}～{{ item.tempMax }}°C
          </div>
          <div class="day-temp" style="padding-top:8px;">
            <img style="height:16px;" src="@/assets/dataStation/fj2.png">
            <el-icon color="#A4D9CD" :size="12"><arrow-left /></el-icon>
            {{ item.windScaleDay }}级</div>
        </div>
        <div class="weather-item-wbox">
          <template v-if="lists.length>0&&lists[0].warning">
            <div>
              <div
                style="text-shadow: 0px 0px 15px rgba(248,118,5,0.6);
                background: linear-gradient(180deg, #EEEEEE 0%, #FB8E16 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;"
              >灾害天气</div>
              <div>
                <span v-for="dt in JSON.parse(lists[0].warning)" :key="dt.id" :title="dt.title" style="font-size: 13px;color:#E28622;">
                  {{ dt.title }}
                </span>
              </div>
            </div>
          </template>
          <div v-else>暂无预警</div>
        </div>
        <div class="weather-item-right" @click="goUrl">
          <div>更多<img style="height:16px;" src="@/assets/dataStation/r1.png"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { getFarmWeather, getPredictionWeather, getDailyWeather } from '@/api/plant'
import { formatDateWithTime } from '@/utils/format'
import { useUserStore } from '@/pinia/modules/user'
import { useRouter } from 'vue-router'
const summary = ref('')
const lists = ref('')
const weatherData = ref({})
const address = ref('--')
const userStore = useUserStore()
const router = useRouter()

const get_Prediction_Weather = (location) => {
  getPredictionWeather(location).then(res => {
    summary.value = res.summary || '--'
  })
}
const get_daily_weather = async() => {
  const res = await getDailyWeather('D3', `${weatherData.value.locationLongitude},${weatherData.value.locationLatitude}`)
  lists.value = res.daily
}

const goUrl = async() => {
  router.push(`/factor/weather`)
}

onMounted(() => {
  const fList = userStore.userInfo.farmList.filter((item) => {
    return item.farmId === userStore.userInfo.farmId
  })
  if (fList.length > 0) {
    address.value = fList[0].locationDetail
  }
  getFarmWeather({
    companyId: userStore.userInfo.companyId,
    farmId: userStore.userInfo.farmId }).then(res => {
    if (res.data.length > 0) {
      weatherData.value = res.data[0]
      get_Prediction_Weather(`${weatherData.value.locationLongitude},${weatherData.value.locationLatitude}`)
      get_daily_weather()
    }
  })
})
</script>
  <style lang="scss">
    .right-box{
      display:flex;
      justify-content:end;
      width:100%;
    }
   .max-title-view{
      background-image: url('@/assets/dataStation/max-title-bg.png');
      background-size:100% 100%;
      background-repeat: no-repeat;
      background-position: left;
      height:35px;
      line-height:35px;
      color:#BBECE5;
      font-size:14px;
      font-weight:bold;
      text-indent:10px;
      display:flex;
      justify-content:space-between;
      margin-top:2%;
      width:70%;
      .name{
        span{
          margin-left:10px;
          font-size:12px;
        }
      }
      .land-view{
          font-size:12px;
          font-weight:400;
          display: flex;
          align-items: center;
          justify-content: start;
          .land-item{
            font-size:12px;
            color:#01C6A9;
            position:relative;
            text-indent:20px;
          }
          .on{
            margin-left:20px;
          }
          .on::after,
          .yon::after,
          .land-item::after{
              content: '';
              height:13px;
              width:13px;
              background-color:#A7ABAB;
              margin-right:3px;
              border-radius:2px;
              position:absolute;
              left:0;
              top:50%;
              margin-top:-7px;
          }
          .on::after{
            background-color:#01C6A9;
          }
          .yon::after{
            background-color:#F5AA0F;
          }
      }
      .right-title-view{
        width:60%;
        font-size:12px;
        font-weight:400;
        color:#A4D9CD;
        text-align:right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        img{
          height:20px;
          vertical-align: middle;
        }
      }
   }
   .weather-view{
      display:flex;
      justify-content:space-between;
      width:70%;
      .weather-item{
        width:25%;
        text-align:center;
        img{
         width:80%;
        }
        .weather-text{
          font-size:12px;
          color:#B0F3E4;
          margin-top:-10px;
        }
        .weather-num{
          font-size:16px;
          color:#B0F3E4;
          font-weight:bold;
          span{
            font-size:12px;
            color:#A4E1D3;
          }
        }
        .weather-box{
            display:flex;
            justify-content:left;
            align-items:center;
            .max-temp{
                font-size:24px;
                color:#B7FFEE;
                padding-right:4px;
            }
            .min-temp{
                font-size:12px;
                color:#A4E1D3;
            }
        }
      }
   }
   .title-line-bg1,
   .title-line-bg{
        height:40px;
        width:70%;
        border-radius:40px;
        margin-top:6px;
        background-image: url('@/assets/dataStation/wbg1.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        font-size:12px;
        line-height:40px;
        color:#FF9827;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right:10px;
        position:relative;
        .icon-img{
            height:42px;
            vertical-align: middle;
        }
   }
   .title-line-bg1{
     background-image: url('@/assets/dataStation/wbg2.png');
     color:#1D9AFD;
     width:68%;
   }
   .title-line-bg1::after,
   .title-line-bg::after{
            content: '';
            position: absolute;
            width: 1px;
            height:20px;
            background: #FF982760;
            top: 50%;
            margin-top: -10px;
            left: 96px;
    }
    .title-line-bg1::after{
        background: #1D9AFD60;
    }
    .weather-grid{
        display:flex;
        justify-content:space-between;
        width:66%;
        margin-top:10px;
        .weather-item-wbox,
        .weather-item{
            width:23%;
            background-image:url(@/assets/dataStation/w7.png);
            height:110px;
            background-size:100% 100%;
            background-repeat:no-repeat;
            background-position:center;
            text-align:center;
            font-size:12px;
            color:#A4D9CD;
            cursor:pointer;
            .day-text{
                 font-size:14px;
                 color:#BBECE5;
                 font-weight:600;
                 text-align:center;
                 padding:10px 0 2px 0;
            }
            .day-temp{
                padding-top:4px;
                font-size:12px;
                display:flex;
                justify-content:center;
                align-items:center;
            }
        }
        .weather-item-wbox{
            background-image:url(@/assets/dataStation/w8.png);
            text-align:center;
            color:#E28622;
            font-size:22px;
            font-weight:600;
            display:flex;
            justify-content:center;
            align-items:center;
            flex-wrap:wrap;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .weather-item-right{
           width:10px;
           color:#B0F3E4;
           font-size:12px;
           display:flex;
            justify-content:center;
            align-items:center;
            margin-left:8px;
            cursor:pointer;
        }
    }
  </style>

